<template>
	<view class="content" :style="
      'background: url(' + bgBannerUrl + ') no-repeat;background-size: cover;'
    ">

		<!-- 邀请进厅弹窗 -->
		<view class="ccc">
			<Invite> </Invite>
		</view>
		<!-- {{headImg}} -->
		<view :style="'padding-top:' + height + 'px'">
			<view class="head" :style="
          'background: url(' + bgUrl + ') no-repeat;background-size: 100% 100%;'
        ">
				<view style="display: flex">
					<image :src="headImg" class="headUrl" @click="goPath('../subpage/personal/personal')"></image>
					<ul>
						<li style="
                width: 430upx;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              ">
							{{ nickName }}
						</li>
						<li style="
                font-size: 24upx;
                margin-top: 23upx;
                display: flex;
                align-items: center;
              ">
							<text :style="
                  idNoLevel == 4
                    ? 'color:#fdd325;'
                    : idNoLevel == 3
                    ? 'color:#ba57fb;'
                    : idNoLevel == 2
                    ? 'color:#f46e61;'
                    : ''
                ">ID：{{ identityId }}</text>
							<text v-if="idNoLevel != 0 && idNoLevel != 1" class="bigNum" :style="
                  idNoLevel == 4
                    ? 'background:linear-gradient(to right,#FED615,#FFAC1F);'
                    : idNoLevel == 3
                    ? 'background:linear-gradient(to right,#CB5CFC,#C444FC);'
                    : idNoLevel == 2
                    ? 'background:linear-gradient(to right,#FA685A,#EB493A);'
                    : ''
                ">{{
                  idNoLevel == 4
                    ? "帝王"
                    : idNoLevel == 3
                    ? "超靓"
                    : idNoLevel == 2
                    ? "靓号"
                    : ""
                }}</text>
							<text class="copy" @click="copy(identityId)">复制</text>
						</li>
					</ul>
					<view class="set" @click="goPath('../subpage/editor/editor')">
						<image :src="$BASE_URL + '/st/mini/static/img/mine/bianji.png'" mode="widthFix" class="bianji">
						</image>
					</view>
				</view>
				<view class="bottom">
					<ul @click="tis">
						<li class="li1">{{ friendCount }}</li>
						<li class="li2">我的好友</li>
					</ul>
					<ul @click="goPath('../subpage/seenMe/seenMe')">
						<li class="li1">{{ totalCount }}</li>
						<li class="li2">谁看过我</li>
					</ul>
					<ul @click="goPath('../subpage/recent/recent')">
						<li class="li1">{{ countChatRoomAccess }}</li>
						<li class="li2">我的足迹</li>
					</ul>
				</view>
			</view>
			<view class="contList" v-if="show">
				<ul @click="goPath('../subpage/recharge/recharge')">
					<li>
						<image :src="$BASE_URL + '/st/mini/static/img/mine/chongzhi.png'" class="li1"></image>
					</li>
					<li class="li2">充值</li>
				</ul>
				<ul @click="goPath('../subpage/income/income')">
					<li>
						<image :src="$BASE_URL + '/st/mini/static/img/mine/shouru.png'" class="li1"></image>
					</li>
					<li class="li2">收入</li>
				</ul>
				<!-- <ul @click="goPath('../subpage/members/members')">
					<li>
						<image src="../../static/img/huiyuan.png" class="li1" mode="widthFix"></image>
					</li>
					<li class="li2">会员</li>
				</ul> -->
			</view>
			<view class="list">
				<ul v-if="show" @click="goPath('../subpage/level/level')">
					<li class="li1">
						<image :src="$BASE_URL + '/st/mini/static/img/mine/dengji.png'" class="li1"></image>
					</li>
					<li class="li2">我的等级</li>
					<li class="li3">
						<image :src="$BASE_URL + '/st/mini/static/img/mine/right.png'" mode="" class="rightImg"></image>
					</li>
				</ul>
				<button class="fx" data-name="shareBtn" hover-class="btn-hover" open-type="share"
					@click="dianjiyunxin('邀请好友')">
					<ul>
						<li class="li1">
							<image :src="$BASE_URL + '/st/mini/static/img/mine/yq.png'" class="li1"></image>
						</li>
						<li class="li2">邀请好友</li>
						<li class="li3">
							<image :src="$BASE_URL + '/st/mini/static/img/mine/right.png'" mode="" class="rightImg">
							</image>
						</li>
					</ul>
				</button>
				<button open-type="contact" bindcontact="handleContact" show-message-card send-message-title="哩咔小程序"
					@click="dianjiyunxin('联系客服')">
					<ul>
						<li class="li1">
							<image :src="$BASE_URL + '/st/mini/static/img/mine/kf.png'" class="li1"></image>
						</li>
						<li class="li2">联系客服-下载APP</li>
						<li class="li3">
							<image :src="$BASE_URL + '/st/mini/static/img/mine/right.png'" mode="" class="rightImg">
							</image>
						</li>
					</ul>
				</button>
				<ul @click="goPath('../subpage/set/set')">
					<li class="li1">
						<image :src="$BASE_URL + '/st/mini/static/img/mine/shezhi.png'" class="li1"></image>
					</li>
					<li class="li2">账号设置</li>
					<li class="li3">
						<image :src="$BASE_URL + '/st/mini/static/img/mine/right.png'" mode="" class="rightImg"></image>
					</li>
				</ul>
			</view>
		</view>
		<u-popup v-model="shareShow" mode="center">
			<view class="share1">
				<view style="text-align: center; margin-bottom: 20upx">请关注“哩咔”公众号充值</view>
				<image id="imgTest" :src="$BASE_URL + '/st/mini/static/img/mine/qr_code.png'" style="
            width: 432upx;
            height: 490upx;
            margin: 0 auto;
            display: block;
            margin-bottom: 20upx;
          "></image>
				<view style="width: 514upx; margin: 0 auto; display: flex">
					<ul>
						<li class="li3">
							保存二维码扫描关注，或直接搜索公众号“哩咔”关注后可在公众号进行充值哦~
						</li>
					</ul>
				</view>
				<view class="btn" @click="down($BASE_URL + '/st/mini/static/img/mine/qr_code.png')">保存二维码到相册</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 邀请进厅弹窗
	import Invite from '@/pages/components/Invite/Invite.vue'
	export default {
		components: {
			Invite
		},
		data() {
			return {
				denglu: false,
				shareShow: false,
				$BASE_URL: this.$BASE_URL,
				height: "",
				identityId: "",
				headImg: "",
				nickName: "",
				countChatRoomAccess: 0,
				friendCount: 0,
				totalCount: 0,
				show: true,
				bgUrl: "",
				bgBannerUrl: "",
				idNoLevel: "",
				share: {
					title: "语音交友  就上哩咔",
					path: "/pages/index/index",
					imageUrl: "",
					desc: "",
					content: "",
				},
			};
		},

		mounted() {
			this.bgBannerUrl = this.$BASE_URL + "/st/mini/static/img/mine/bgbanner.png";
			this.bgUrl = this.$BASE_URL + "/st/mini/static/img/mine/bg.png";
			this.share.imageUrl = this.$BASE_URL + "/st/mini/static/img/share.png";
		},
		onUnload() {

			this.shareShow = false;

			// 移除监听事件  
			uni.$off('dkjt');
		},

		beforeCreate() {
			console.log('最新')
			var cookie = uni.getStorageSync("cookie")
			console.log('判断有无登录', cookie)
			// 判断是否登录
			if (!cookie) {
				uni.navigateTo({
					url: '../login/wxlogin'
				})
				return
			}
		},

		onShow() {
			console.log('每次')
			this.shareShow = false;
			this.appInitV();
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					// model设备型号
					// iOS
					// 标题栏高度
					if (res.model.indexOf("iPhone") !== -1) {
						that.titleBarHeight = 44;
					} else {
						that.titleBarHeight = 48;
					}
					// 状态栏高度
					that.statusBarHeight = res.statusBarHeight;
					that.height = that.titleBarHeight + that.statusBarHeight;
				},
			});
			uni.getStorage({
				key: "userInfo",
				success: function(res) {
					that.identityId = res.data.identityId;
					that.idNoLevel = res.data.idNoLevel;
				},
				fail: function(res) {
					that.identityId = "";
					that.idNoLevel = "";
				},
			});
			console.log(uni.getSystemInfoSync());
			if (uni.getSystemInfoSync().platform == "android") {
				this.show = true;
			} else {
				this.show = false;
			}

			// 底部bat 埋点
			this.dibuannmd();


		},
		onShareAppMessage() {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				content: this.share.content,
				desc: this.share.desc,
				success: (res) => {
					console.info(res);
				},
			};
		},
		methods: {




			// 弹窗操作埋点
			tuanchuangnecz: function(i, e) {
				 
				// #ifdef  MP-WEIXIN

				// PopUpClick	弹窗内点击		$预置属性		
				// 		$is_first_time	是否首次	BOOL	
				// 		button_name	按钮名称	STRING	引导下载APP海报弹窗复制链接/引导下载APP海报弹窗点击下载/下载APP弹窗取消/下载APP弹窗一键复制/关注公众号充值弹窗保存
				// 		PopUp_name	弹窗名称	STRING	引导下载APP海报弹窗/下载APP弹窗/关注公众号充值弹窗
				// 		current_page	当前页面	STRING	交友tab/一对一消息/厅内/我tab
				// 		room_id	房间ID	STRING	


				getApp().sensors.track('PopUpClick', {
					$is_first_time: uni.getStorageSync("shifoushouci") == 2 ? 'false' : 'true',
					PopUp_name: i,
					button_name: e,
					current_page: '我tab',
					room_id: '',
				})
				// #endif
			},








			// 弹窗埋点
			tanchaungmd: function() {

				// #ifdef  MP-WEIXIN

				// PopUpShow	弹窗浏览		$预置属性		
				// 		$is_first_time	是否首次	BOOL	
				// 		PopUp_name	弹窗名称	STRING	引导下载APP海报弹窗/下载APP弹窗/关注公众号充值弹窗
				// 		current_page	当前页面	STRING	交友tab/一对一消息/厅内/我tab/
				// 		room_id	房间ID	STRING	
				getApp().sensors.track('PopUpShow', {
					$is_first_time: uni.getStorageSync("shifoushouci") == 2 ? 'false' : 'true',
					PopUp_name: '关注公众号充值弹窗',
					current_page: '我tab',
					room_id: '',
				})

				// #endif

			},


			// 点击 触发 云信

			dianjiyunxin: function(e) {
				 

				// icon_name	icon名称	STRING	邀请好友/联系客服/私聊
				// current_page	当前页面	STRING	我tab页面/交友tab页面

				// #ifdef  MP-WEIXIN




				getApp().sensors.track('IconClick', {
					// 是否首次	BOOL
					$is_first_time: uni.getStorageSync("shifoushouci") == 2 ? 'false' : 'true',
					is_no_authorization: uni.getStorageSync("nei") == "" ? 'false' : 'true',
					icon_name: e,
					current_page: '我tab页面'
				})

				// #endif   


			},



			// 底部bat 埋点
			dibuannmd: function() {
				//  #ifdef  MP-WEIXIN
				// 	$预置属性		
				// is_no_authorization	是否授权	BOOL	
				// $is_first_time	是否首次	BOOL	
				// 	tab名称	STRING	交友tab/房间tab/消息tab/我tab
				getApp().sensors.track('BottomTabView', {
					// 是否首次	BOOL
					$is_first_time: uni.getStorageSync("shifoushouci") == 2 ? 'false' : 'true',
					is_no_authorization: uni.getStorageSync("nei") == "" ? 'false' : 'true',
					tab_name: '我tab'
				})
				// #endif   



			},





			// 我的好友提示/*  */
			tis() {
				uni.showToast({
					title: "更多精彩请下载“哩咔”APP",
					icon: "none",
					duration: 2000,
				});
			},

			down(url) {
				var that = this;
				uni.downloadFile({
					//下载
					url: url, //图片下载地址
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								//保存图片到系统相册。
								filePath: res.tempFilePath, //图片文件路径
								success: function() {
									that.shareShow = false;
									that.shareShow1 = false;

									that.tuanchuangnecz('关注公众号充值弹窗', '关注公众号充值弹窗保存')


									uni.showToast({
										title: "图片保存成功",
										icon: "none",
									});
								},
								fail: function(e) {
									that.shareShow = false;
									that.shareShow1 = false;
									uni.showToast({
										title: "图片保存失败",
										icon: "none",
									});
								},
							});
						}
					},
				});
			},
			urlTobase64(url) {
				uni.getFileSystemManager().readFile({
					filePath: url, //选择图片返回的相对路径
					encoding: "base64", //编码格式
					success: (res) => {
						//成功的回调
						let base64 = "data:image/jpeg;base64," + res.data; //不加上这串字符，在页面无法显示的哦
						return base64;
					},
					fail: (e) => {
						console.log("图片转换失败");
					},
				});
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: function() {
						//重点~做笔记
						//在success中加入uni.hideToast()可以解决
						uni.showToast({
							title: "复制成功",
							duration: 2000,
							icon: "none",
						});
						//以下就可自定义操作了~
					},
					fail: function(err) {
						uni.showToast({
							title: "复制失败",
							duration: 2000,
							icon: "none",
						});
					},
				});
			},
			goPath(path) {

				if (path == "../subpage/seenMe/seenMe" && !this.show) {
					uni.showToast({
						title: "由于相关规范，iOS系统暂不支持",
						duration: 2000,
						icon: "none",
					});
				} else {
					if (
						path == "../subpage/editor/editor" ||
						path == "../subpage/personal/personal"
					) {
						uni.showToast({
							title: "更多精彩请下载“哩咔”APP",
							icon: "none",
							duration: 2000,
						});
					} else {
						if (path == "../subpage/recharge/recharge") {
							//  
							// 展示弹窗的埋点
							this.tanchaungmd()


							this.shareShow = true;
						} else {
							uni.navigateTo({
								url: path,
							});
						}
					}
				}
			},
			appInitV() {
				var data = {
					url: "/web/v2/api/app/appInitV",
					methods: "post",
					data: {
						apiVersion: "2.0",
					},
				};
				this.$http(data).then((res) => {
					console.log('/api/app/appInitV', res)

					if (res.data.code == 21000) {
						console.log("code200")
						this.countChatRoomAccess = res.data.data.countChatRoomAccess; //我的足迹数量
						this.friendCount = res.data.data.friendCount;
						this.totalCount = res.data.data.totalCount; // 谁看过我的总数
						this.myProfileInfo();
					}
				});
			},
			myProfileInfo() {
				var data = {
					url: "/web/v2/api/app/myProfileInfo",
					methods: "post",
					data: {},
				};
				this.$http(data).then((res) => {
					if (res.data.code == 21000) {
						this.nickName = res.data.data.nickName;
						this.headImg = this.$global.getImageUrl(
							res.data.data.headImg,
							"https://ourydcimage.shenghua6.cn"
						);
					} else {}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	
	
	.ccc /deep/ .u-mode-center-box {
			background: none;
		}
	
	
	button::after {
		border: none;
		background: none;
	}

	button {
		width: 100%;
		background: none;
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 28upx;
		display: flex;
		outline: none;
	}

	.btn-hover {
		background-color: transparent;
	}

	.bigNum {
		padding: 0 10upx;
		text-align: center;
		border-radius: 8upx;
		font-size: 18upx;
		color: #ffffff;
		margin-left: 10upx;
		display: block;
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.copy {
		padding: 2upx 12upx;
		background: rgba(255, 255, 255, 0.2);
		border: 1px solid #ffffff;
		margin-left: 32upx;
		border-radius: 21upx;
		font-size: 18upx;
		color: #ffffff;
	}

	.head {
		width: 714upx;
		height: 388upx;
		margin: 0 auto;
		font-size: 36upx;
		color: #ffffff;

		ul {
			margin-top: 59upx;
		}

		.headUrl {
			width: 132upx;
			height: 132upx;
			border: 4upx solid rgba(255, 255, 255, 0.6);
			border-radius: 50%;
			margin-left: 24upx;
			margin-right: 24upx;
			margin-top: 37upx;
		}

		.bianji {
			width: 30upx;
			margin-right: 41upx;
			margin-top: 130upx;
		}

		.set {
			margin-left: auto;
		}
	}

	.bottom {
		display: flex;

		ul {
			flex: 1;
			text-align: center;
			margin-top: 36upx;

			.li1 {
				font-size: 36upx;
			}

			.li2 {
				font-size: 28upx;
				margin-top: 3upx;
			}
		}
	}

	.contList {
		display: flex;
		text-align: center;

		ul {
			flex: 1;

			.li1 {
				width: 100upx;
				height: 96upx;
			}

			.li2 {
				font-size: 28upx;
				color: #3b3f63;
			}
		}
	}

	.list {
		width: 714upx;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 42upx;
		padding: 14upx 0;
		margin-top: 12upx;

		ul {
			display: flex;
			width: calc(100% - 46upx);
			height: 92upx;
			align-items: center;
			padding: 0 23upx;

			.li1 {
				width: 30upx;
				height: 30upx;
				font-size: 28upx;
				color: #3b3f63;
				display: block;
			}

			.li2 {
				margin-left: 30upx;
				font-size: 28upx;
			}

			.li3 {
				margin-left: auto;
			}

			.rightImg {
				width: 25upx;
				height: 25upx;
			}
		}
	}

	.share1 {
		width: 566upx;
		background: #f0eff8;
		border-radius: 16upx;
		padding: 26upx 0;

		.hgimg {
			width: 514upx;
			height: 514upx;
			border: 1px solid #979797;
			border-radius: 6upx;
			margin: 0 auto;
			display: block;
			margin-bottom: 26upx;
		}

		.li1 {
			font-size: 36upx;
			color: #181821;
		}

		.li2 {
			font-size: 24upx;
			color: #181821;
		}

		.li3 {
			font-size: 20upx;
			color: #999999;
		}

		.btn {
			width: 514upx;
			height: 77upx;
			line-height: 77upx;
			text-align: center;
			background-image: linear-gradient(-44deg,
					#7078ff 0%,
					#b1a4ff 100%,
					#b1a4ff 100%);
			box-shadow: 0 8upx 9upx 0 rgba(255, 255, 255, 0.72), 0 14upx 9upx 0 #def2ff,
				inset 0 0 9upx 4upx rgba(250, 230, 255, 0.16);
			border-radius: 14upx;
			margin: 0 auto;
			font-size: 32upx;
			color: #ffffff;
			margin-top: 16upx;
		}
	}
</style>
